import React from 'react'
import './demo.css'
import {
  message, Button, Space, DatePicker, Rate, Skeleton, Steps, Tag, Divider,
  Pagination, BackTop
} from 'antd'
import {
  StarOutlined, StarFilled, StarTwoTone, DingdingOutlined, setTwoToneColor,
  WifiOutlined, FastBackwardOutlined, PauseCircleFilled, FastForwardOutlined,
  UpCircleFilled
} from '@ant-design/icons'

setTwoToneColor('#ff0000')

class Demo extends React.Component {

  render() {
    return (
      <div className="demo">
        {/* 回到顶部 */}
        <BackTop>
          <UpCircleFilled style={ { fontSize: 40, color: 'red' } } />
        </BackTop>
        {/* 主要内容 */}
        <div className="main">
          {/* 按钮栏 */}
          <div className="section buttons">
            <div className="section-title">
              <Divider>按钮栏</Divider>
            </div>
            <div className="section-main">
              <Space>
                <Button type="primary" onClick={ () => { message.success('操作成功') } }>按钮</Button>
                <Button type="primary" disabled>按钮</Button>
                <Button type="ghost" onClick={ () => { message.info('点击了按钮') } }>按钮</Button>
                <Button type="ghost" disabled>按钮</Button>
                <Button type="dashed" onClick={ () => { message.warning('警告：未满18岁不准入内') } }>按钮</Button>
                <Button type="danger" onClick={ () => { message.error('检测到您还未成年，系统将自动开启青少年模式') } }>按钮</Button>
                <Button type="danger" disabled>按钮</Button>
                <Button type="link">按钮</Button>
                <Button type="link" disabled>按钮</Button>
                <Button type="text">按钮</Button>
                <Button type="text" disabled>按钮</Button>
              </Space>
            </div>
          </div>
          {/* 图标栏 */}
          <div className="section icons">
            <div className="section-title">
              <Divider>图标栏</Divider>
            </div>
            <div className="section-main">
              <Space>
                <StarOutlined />
                <StarFilled />
                <StarTwoTone />
                <DingdingOutlined />
                <WifiOutlined />
                <FastBackwardOutlined />
                <PauseCircleFilled />
                <FastForwardOutlined />
              </Space>
            </div>
          </div>
          {/* 日期栏 */}
          <div className="section dates">
            <div className="section-title">
              <Divider>日期栏</Divider>
            </div>
            <div className="section-main">
              <Space>
                <DatePicker onChange={ this.onChange } placeholder="请选择日期" disabled></DatePicker>
                <DatePicker onChange={ this.onChange } picker="year" placeholder="请选择年份"></DatePicker>
                <DatePicker onChange={ this.onChange } picker="quarter" placeholder="请选择季度"></DatePicker>
                <DatePicker onChange={ this.onChange } picker="month" placeholder="请选择月份"></DatePicker>
                <DatePicker onChange={ this.onChange } placeholder="请选择日期"></DatePicker>
              </Space>
            </div>
          </div>
          {/* 评分栏 */}
          <div className="section rates">
            <div className="section-title">
              <Divider>评分栏</Divider>
            </div>
            <div className="section-main">
              <Rate allowClear={ false } defaultValue="5"></Rate>
              <br />
              <Rate character="好" defaultValue="3"></Rate>
              <br />
              <Rate character="卧槽" defaultValue="4"></Rate>
              <br />
              <Rate character="nb" defaultValue="4"></Rate>
              <br />
              <Rate character="厉害了" defaultValue="4"></Rate>
            </div>
          </div>
          {/* 骨架屏栏 */}
          <div className="section skeletons">
            <div className="section-title">
              <Divider>骨架屏栏</Divider>
            </div>
            <div className="section-main">
              <Skeleton></Skeleton>
            </div>
          </div>
          {/* 步骤条栏 */}
          <div className="section steps">
            <div className="section-title">
              <Divider>步骤条栏</Divider>
            </div>
            <div className="section-main">
              <Steps current={ 2 }>
                <Steps.Step title="Finished" />
                <Steps.Step title="In Progress" />
                <Steps.Step title="Waiting" />
              </Steps>
              <br />
              <Steps current={ 2 }>
                <Steps.Step title="Finished" description="This is a description." />
                <Steps.Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
                <Steps.Step title="Waiting" description="This is a description." />
              </Steps>
              <br />
              <Steps size="small" current={ 2 }>
                <Steps.Step title="Finished" description="This is a description." />
                <Steps.Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
                <Steps.Step title="Waiting" description="This is a description." />
              </Steps>
            </div>
          </div>
          {/* 标签栏 */}
          <div className="section tags">
            <div className="section-title">
              <Divider>标签栏</Divider>
            </div>
            <div className="section-main">
              <Space>
                <Tag>普通标签</Tag>
                <Tag closable>带关闭的普通标签</Tag>
                <Tag closable color="red">红色标签</Tag>
                <Tag closable color="yellow">黄色标签</Tag>
                <Tag closable color="green">绿色标签</Tag>
              </Space>
            </div>
          </div>
          {/* 分页栏 */}
          <div className="section paginations">
            <div className="section-title">
              <Divider>分页栏</Divider>
            </div>
            <div className="section-main">
              <Pagination defaultCurrent={ 1 } total={ 50 } />
              <br />
              <Pagination defaultCurrent={ 3 } total={ 50 } disabled/>
              <br />
              <Pagination defaultCurrent={ 6 } total={ 500 } />
              <br />
              <Pagination
                showSizeChanger
                defaultCurrent={ 3 }
                total={ 500 }
              />
              <br />
              <Pagination
                showSizeChanger
                defaultCurrent={ 3 }
                total={ 500 }
                disabled
              />
              <br />
              <Pagination showQuickJumper defaultCurrent={ 2 } total={ 500 } />
              <br />
              <Pagination showQuickJumper defaultCurrent={ 2 } total={ 500 } disabled />
              <br />
              <Pagination
                total={ 85 }
                showSizeChanger
                showQuickJumper
                showTotal={ total => `共 ${ total } 条数据` }
              />
            </div>
          </div>
        </div>
      </div>
    )
  }

  onChange(date, dateString) {
    console.log(date, dateString)
  }

}

export default Demo